<!--手机验证码及邮箱验证码-->
<template>
  <div class="verificationCode-container">
    <el-input v-model="verificationCode" :placeholder="placeholder" :maxlength="maxlength" type="text" auto-complete="on" @blur="checkCode" />
    <div class="tip-container" :style="{'height':height+'px','line-height':height+'px'}">
      <span v-if="isCanClick && !disabled" @click="handleReady">{{ verificationCodeText }}</span>
      <span v-if="!isCanClick && !disabled">{{ verificationCodeText }}</span>
      <span v-if="disabled" style="cursor: no-drop">{{ verificationCodeText }}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // v-model
    value: {
      type: String,
      required: true
    },
    // 模式  mobile：手机  email：邮箱  默认：mobile
    mode: {
      type: String,
      default: 'mobile'
    },
    codeDevice: {
      type: String,
      required: true
    },
    height: {
      type: Number,
      default: 36
    },
    placeholder: {
      type: String,
      default: '请输入6位验证码'
    },
    maxlength: {
      type: Number,
      default: 6
    },
    // 是否验证设备号是否存在
    check: {
      type: Boolean,
      default: false
    },
    // 验证Action
    checkAction: {
      type: String,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      verificationCode: '',
      verificationCodeText: '获取验证码',
      isCanClick: true,
      timer: null
    }
  },
  watch: {
    verificationCode: function(val) {
      this.$emit('input', val)
    },
    value: function(val) {
      this.verificationCode = val
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.verificationCodeText = ('获取验证码')
      this.isCanClick = true
    },
    handleReady() {
      if (this.mode === 'mobile') {
        if (!this.commonRegular.mobile.test(this.codeDevice)) {
          this.msgWarning('请输入正确的11位手机号码')
          return
        }
      }
      if (this.mode === 'email') {
        if (!this.commonRegular.email.test(this.codeDevice)) {
          this.msgWarning('请输入有效的邮箱')
          return
        }
      }
      if (this.check) {
        if (!this.checkAction) {
          this.msgWarning('缺少【checkAction】属性')
          return
        }
        this.$store.dispatch(this.checkAction, { field: this.mode, value: this.codeDevice }).then(res => {
          if (!res) {
            this.msgWarning('手机号不存在,请重新输入!')
            return
          }
          this.getVerificationCode()
        })
      } else {
        this.getVerificationCode()
      }
    },
    async getVerificationCode() {
      try {
        let action = 'mobileVerificationCode'
        if (this.mode === 'email') {
          action = 'emailVerificationCode'
        }
        await this.$store.dispatch(action, this.codeDevice)
        this.isCanClick = false
        var count = 60
        this.timer = setInterval(() => {
          count--
          this.verificationCodeText = (count + '后获取验证码')
          if (count <= 0) {
            clearInterval(this.timer)
            this.verificationCodeText = ('获取验证码')
            this.isCanClick = true
          }
        }, 1000)
      } catch (err) {
        console.log(err)
      }
    },
    checkCode() {
      if (!this.codeDevice) {
        if (this.mode === 'mobile') {
          this.msgWarning('请输入手机号码')
          return
        }
        if (this.mode === 'email') {
          this.msgWarning('请输入邮箱号码')
          return
        }
      }
      if (this.verificationCode) {
        this.$store.dispatch('checkVerificationCode', {
          code: this.verificationCode,
          device: this.codeDevice
        }).then((res) => {
          this.$emit('checkCode', true)
        }).catch((_) => {
          this.$emit('checkCode', false)
          this.verificationCode = ''
          this.verificationCodeText = ('获取验证码')
          this.isCanClick = true
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .verificationCode-container{
    display: flex;
    .tip-container{
      text-align: center;
      width: 140px;
      background: #3f8bfd;
      border-radius: 2px;
      color: #fff;
      margin-left: 10px;
      cursor: pointer
    }
  }
</style>
